<template>
    <el-row class="lives-news">
        <el-row class="title">
            <h3>视频管理</h3>
        </el-row>
        <el-row>
            <el-form :inline="true">
                <el-form-item>
                    <el-button type="primary" @click="showAddDialog"><i class="el-icon-plus el-icon--left"></i>添加视频</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row>
            <el-table :data="videoLists" border>
                <el-table-column prop="periodVideoId" label="视频id" align="center"></el-table-column>
                <el-table-column prop="title" label="视频标题" align="center"></el-table-column>
                <el-table-column label="视频地址" align="center">
                    <template slot-scope="scope"><a :href="scope.row.url" target="_blank">{{scope.row.url}}</a></template>
                </el-table-column>
                <el-table-column label="添加时间" align="center">
                    <template slot-scope="scope">{{moment(scope.row.addTime).format('YYYY-MM-DD HH:mm:ss')}}</template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" type="primary" @click="updateVideos(scope.$index, scope.row)">修改</el-button>
                        <el-button size="small" type="danger" @click="deleteVideos(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-dialog :title="isAdd?'添加视频':'修改视频'" :visible.sync="showVideoDialog" size="tiny" @close="closeVideoDialog" class="dialog">
            <el-form :model="videosObj" label-width="120px">
                <el-form-item label="视频标题">
                    <el-input type="text" v-model="videosObj.title" auto-complete="off" placeholder="请输入视频标题"></el-input>
                </el-form-item>
                <el-form-item label="视频地址">
                    <el-input type="text" v-model="videosObj.url" auto-complete="off" placeholder="请输入视频地址"></el-input>
                </el-form-item>
                <el-form-item label="缩略图">
                    <el-upload class="avatar-uploader" :headers="uploadHeader" :action="BASEURL+'/upload/videos'" :show-file-list="false" :on-success="handleAvatarSuccess">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                    <div>
                        <img v-if="imgUrl" :src="UPLOADURL+imgUrl" alt="" class="banner-thumb">
                    </div>
                </el-form-item>
                <el-form-item label="添加时间">
                    <el-date-picker v-model="videosObj.addTime" type="datetime" placeholder="请选择添加时间" @change="timeChange">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelAddVideos">取 消</el-button>
                <el-button type="primary" @click="addVideos" :loading="addLoading">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 分页 -->
        <el-row>
            <el-col class="pagination">
                <el-pagination @current-change="currentChange" :current-page="pageId" :page-size="pageSize" layout="total, prev, pager, next" :total="counts">
                </el-pagination>
            </el-col>
        </el-row>
    </el-row>
</template>
<script>
import {
    getVideoLists,
    addVideo,
    updateVideoById,
    deleteVideoById
} from '@/api/api'
export default {
    data: function() {
        return {
            pageId: 1,
            pageSize: 10,
            counts: 0,
            isAdd: true,
            showVideoDialog: false,
            addLoading: false,
            videoLists: [],
            videosObj: {
                periodVideoId: null,
                time: "",
                title: "",
                url: "",
                addTime: "",
                imgUrl: ''
            },
            uploadHeader: {
                TOKEN: sessionStorage.getItem('jwt'),
                APPID: 1
            },
            imgUrl: ''
        }
    },
    created: function() {
        this.pageId = parseInt(this.$route.query.page) || 1;
        this.getVideoDatas();
    },
    methods: {
        getVideoDatas: function() {
            getVideoLists({ params: { pageId: this.pageId, pageSize: this.pageSize } }).then(res => {
                console.log(res)
                this.counts = res.count;
                this.videoLists = res.list
            })
        },
        showAddDialog: function() {
            this.isAdd = true;
            this.showVideoDialog = true;
        },
        closeVideoDialog: function() {
            this.isAdd = true;
            this.showVideoDialog = false;
            this.videosObj = {
                periodVideoId: null,
                time: "",
                title: "",
                url: "",
                addTime: "",
                imgUrl: ''
            }
        },
        updateVideos: function(index, row) {
            this.videosObj = {
                periodVideoId: row.periodVideoId,
                time: row.time,
                title: row.title,
                url: row.url,
                addTime: row.addTime,
                imgUrl: row.imgUrl
            }
            this.imgUrl = row.imgUrl;
            this.isAdd = false;
            this.showVideoDialog = true;
        },
        deleteVideos: function(index, row) {
            this.$confirm('是否删除?', '删除视频', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'danger'
            }).then(() => {
                deleteVideoById(row.periodVideoId).then(res => {
                    this.getVideoDatas();
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                    this.showVideoDialog = false;
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        cancelAddVideos: function() {
            this.closeVideoDialog()
        },
        timeChange: function(val) {
            this.videosObj.time = new Date(val).getTime();
            this.videosObj.addTime = new Date(val).getTime();
        },
        addVideos: function() {
            if (this.isAdd) {
                addVideo(this.videosObj).then(res => {
                    console.log(res)
                    this.getVideoDatas();
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    })
                    this.showVideoDialog = false;
                    this.imgUrl = '';
                    this.videosObj.imgUrl = '';
                })
            } else {
                updateVideoById(this.videosObj).then(res => {
                    this.getVideoDatas();
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    })
                    this.showVideoDialog = false;
                    this.imgUrl = '';
                    this.videosObj.imgUrl = '';
                })
            }
        },
        currentChange: function(val) {
            this.$router.push('?page=' + val)
            this.pageId = val;
            this.getVideoDatas()
        },
        handleAvatarSuccess(res){
            if(res.status){
                this.$message({
                    message: '上传成功',
                    type: 'success'
                })
                this.imgUrl = res.data.webPath;
                this.videosObj.imgUrl = res.data.webPath;
            }else{
                this.$message({
                    message: '上传失败',
                    type: 'error'
                })
            }
        }
    }
}
</script>
<style scoped lang="scss">
.lives-news {
    .title {
        font-size: 12px;
        border-bottom: 1px solid #eaeaea;
        margin-bottom: 5px;
        h3 {
            display: inline-block;
            padding: 5px 0;
            margin: 0;
            font-weight: normal;
            color: #23b7e5;
            border-bottom: 1px solid #23b7e5;
        }
    }
    .banner-thumb{
        width: 100%;
    }
}
</style>